Web Development Router Events এবং Navigation Handling গাইড ও নোট

Riot.js এ Router Events এবং Navigation Handling অ্যাপ্লিকেশনের রাউটিং এবং ভিউ স্যুইচিং ব্যবস্থাপনার জন্য ব্যবহৃত হয়। Riot.js নিজে একটি রাউটিং সিস্টেম প্রদান না করলেও, আপনি সহজেই তৃতীয় পক্ষের রাউটার ব্যবহার করতে পারেন বা নিজেই একটি সিম্পল রাউটিং সিস্টেম তৈরি করতে পারেন। এখানে, আমরা riot-router প্যাকেজ ব্যবহার করে রাউটিং হ্যান্ডলিং এবং Router Events কিভাবে কাজ করে তা দেখাব।

১. Riot.js এ রাউটিং সিস্টেম সেটআপ করা

আমরা riot-router প্যাকেজটি ব্যবহার করে Riot.js অ্যাপ্লিকেশনগুলির জন্য রাউটিং হ্যান্ডলিং সেটআপ করতে পারি। এর মাধ্যমে আপনি URL-এর পরিবর্তন অনুযায়ী বিভিন্ন কম্পোনেন্ট রেন্ডার করতে পারেন।

Step 1: riot-router ইনস্টল করা

প্রথমে, আপনাকে riot-router প্যাকেজটি ইনস্টল করতে হবে। আপনি npm বা yarn ব্যবহার করে এটি ইনস্টল করতে পারেন।

npm install riot-router

Step 2: রাউটার সেটআপ করা

আপনার Riot.js অ্যাপ্লিকেশনকে রাউটিং সিস্টেমে পরিণত করার জন্য riot-router ব্যবহার করতে হবে।

import riot from 'riot';
import { route, router } from 'riot-router';

import './home.riot';
import './about.riot';
import './notfound.riot';

// Home কম্পোনেন্ট
riot.component('home', {
  onMounted() {
    this.message = 'Welcome to the Home Page!';
  },
  template: `<h1>{message}</h1>`
});

// About কম্পোনেন্ট
riot.component('about', {
  onMounted() {
    this.message = 'This is the About Page!';
  },
  template: `<h1>{message}</h1>`
});

// 404 কম্পোনেন্ট (যখন কোনো রাউট পাওয়া না যায়)
riot.component('notfound', {
  onMounted() {
    this.message = 'Page not found!';
  },
  template: `<h1>{message}</h1>`
});

// রাউটিং সেটআপ
router(route('/home', 'home'));
router(route('/about', 'about'));
router(route('*', 'notfound'));  // সবকিছুর জন্য ফ fallback

// অ্যাপ্লিকেশন মাউন্ট করা
riot.mount('home');

ব্যাখ্যা:

• router(): এটি রাউটের জন্য URL ম্যাপিং সেট করে। যেমন, /home রুটে home কম্পোনেন্ট এবং /about রুটে about কম্পোনেন্ট রেন্ডার করা হবে।
• route(): এটি রাউটের পাথ এবং কম্পোনেন্টের নাম সন্নিবেশ করে।
• * রুট দিয়ে আমরা 404 পেজ বা ফ্যালব্যাক রাউট নির্ধারণ করেছি, যা এমন কোনো রাউট পাওয়া না গেলে ব্যবহৃত হবে।

৩. Router Events হ্যান্ডলিং

riot-router এ রাউটিং পরিবর্তন হলে কিছু ইভেন্ট ঘটে যা আপনি হ্যান্ডল করতে পারেন, যেমন before এবং after রাউট ইভেন্টস।

Step 1: Router Event Listeners ব্যবহার করা

import { router, route } from 'riot-router';

// Before এবং After রাউট ইভেন্ট হ্যান্ডল করা
router.before('/home', () => {
  console.log('Navigating to Home...');
});

router.after('/about', () => {
  console.log('Navigated to About!');
});

// রাউট সেটআপ
router(route('/home', 'home'));
router(route('/about', 'about'));

ব্যাখ্যা:

• router.before(route, callback): যখন নির্দিষ্ট রাউটে যাওয়া হবে, তখন একটি কাস্টম কলব্যাক ফাংশন চালানো হয়। আপনি এখানে রাউটিং পরিবর্তন হওয়ার আগে কিছু কাজ করতে পারেন (যেমন, লগিং, প্রিপ্যারেশন ইত্যাদি)।
• router.after(route, callback): রাউট পরিবর্তন হওয়ার পরে কিছু কাজ করা যেতে পারে, যেমন ডেটা ফেচ করা বা UI আপডেট করা।

৪. riot-router এ Navigation Handling

রাউটার সঠিকভাবে কাজ করার জন্য নেভিগেশন হ্যান্ডলিং গুরুত্বপূর্ণ। রাউটারের মাধ্যমে একটি পেজে যাওয়ার সময় নেভিগেট করতে route() ফাংশন ব্যবহার করা হয়।

Step 1: URL পরিবর্তন করতে route() ব্যবহার করা

import { route } from 'riot-router';

// হোম পেজে নেভিগেট করা
function navigateToHome() {
  route('/home');
}

// অ্যাবাউট পেজে নেভিগেট করা
function navigateToAbout() {
  route('/about');
}

এখানে, route('/home') দিয়ে হোম পেজে নেভিগেট করা হচ্ছে।

Step 2: নেভিগেটর হিসেবে লিঙ্ক ব্যবহার করা

আপনি অ্যাঙ্কর ট্যাগ ব্যবহার করেও রাউট চেঞ্জ করতে পারেন:

<a href="/home" onclick={navigateToHome}>Go to Home</a>
<a href="/about" onclick={navigateToAbout}>Go to About</a>

এছাড়া, যদি আপনি URL পরিবর্তন করতে চান তবে route() ফাংশন ব্যবহার করতে পারেন।

৫. রাউটিং ফিচারস এর কাস্টমাইজেশন

আপনি চাইলে রাউটারের অন্যান্য ফিচারগুলো কাস্টমাইজ করতে পারেন, যেমন:

1. 404 পেজ: আপনি একটি 404 পেজ তৈরি করতে পারেন যেখানে অবৈধ URL গেলে ব্যবহারকারীকে ডাইভার্ট করা হবে।
2. এনক্রিপ্টেড রাউট: আপনি রাউটসের জন্য বিভিন্ন সিকিউরিটি চেক ব্যবহার করতে পারেন (যেমন, লগইন চেক)।
3. প্যারামিটার ব্যবহার: URL প্যারামিটার বা কুয়েরি স্ট্রিং ব্যবহার করে ডাইনামিক কন্টেন্ট রেন্ডার করতে পারেন।

উদাহরণ: রাউট প্যারামিটার

router(route('/user/:id', 'userProfile'));

riot.component('userProfile', {
  onMounted() {
    const userId = this.opts.id;
    this.message = `Displaying profile for user ${userId}`;
  },
  template: `<h1>{message}</h1>`
});

এখানে, :id রাউট প্যারামিটার ব্যবহার করা হয়েছে, যা কম্পোনেন্টের opts.id হিসেবে প্রাপ্ত হবে।

Riot.js-এ রাউটিং এবং নেভিগেশন হ্যান্ডলিং খুবই গুরুত্বপূর্ণ এবং সহজে কনফিগার করা যায়। riot-router প্যাকেজ ব্যবহার করে আপনি রাউটিং ইভেন্টস (যেমন, before এবং after), কাস্টম URL, প্যারামিটার, এবং 404 পেজগুলোকে সুন্দরভাবে ম্যানেজ করতে পারবেন। route() এবং router ফাংশনের মাধ্যমে URL পরিবর্তন করা সহজ এবং কার্যকর।